<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">    
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.css" rel="stylesheet">
    <title>bootstrap-table-addrbar Demo</title>
</head>
<body>
    <div class="container">
        <table id="bt-table"></table>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>
    <script src="./bootstrap-table-addrbar.js"></script>
    <script type="text/javascript">
        ;(function(){
            var tableOpts = {
                columns: [
                    {title: 'id', field: 'id'},
                    {title: '名称', field: 'name'},
                    {title: '价格', field: 'price'},
                ],
                classes: 'table table-hover table-no-bordered',
                sidePagination: 'server',
                idField: 'id',
                uniqueId: 'id',
                search: true,
                pagination: true,
                paginationVAlign: 'bottom',
                paginationHAlign: 'left',
                paginationDetailHAlign: 'right',
                pageList: [20, 50, 100, 500],
                url: 'https://note.generals.space/napi/bootstrap-table-addrbar',
                addrbar: true,
            }
            $('#bt-table').bootstrapTable(tableOpts);
        })();
    </script>
</body>
</html>